<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head><style>
    .ead{text-align: center;}
    .con{margin:auto;
             display: grid;
             place-items:center;
             width:90%;
             
             }
     .img-box{display:table;}
     img{width:33%;}        
 </style>

<body>
    <style>
        img{
            width: 550px;
            height: 550px;
        }
    </style>
    <body>
        <h1 align="center">我的有声相册</h1>
        <h2 align="center">
        <a href="#jiaxiang">家乡</a>
        <a href="#fengjing">风景</a>
        <a href="#gaozhong">高中</a>
        </h2>
        <audio src="../有声相册/img/音乐.mp3" controls></audio>
        <div id="jiaxiang">
        <h1 align="center">风景</h1>
            <p align="center">用文照片来记录生活的每一个瞬间 我们感受到幸福的每一刻 都弥足珍贵 把它定格保存 在未来不经意看见的时候 仍就会感到幸福</p>

            <a href="../有声相册/img/风景8.jpg"><img src="../有声相册/img/风景3.jpg" ></a>
        </div>
        <div id="fengjing">
            <h1 align="center">家乡</h1>
            <p align="center">老家的风景并不惊艳，但可以治愈你一整年的疲惫</p>
            <a href="../有声相册/img/家乡2.jpg"><img src="../有声相册/img/家乡4.jpg" alt=""></a>
            <a href="../有声相册/img/家乡7.jpg"><img src="../有声相册/img/家乡5.jpg" alt=""></a>
    
        </div>
        <div id="gaozhong">
            <h1 align="center">高中</h1>
            <p align="center">当你在黄金般的青春年华里泛舟于学海波峰浪谷间时，那青春是美的，那青春是永恒的</p>
            <a href="../有声相册/img/高中1.jpg"><img src="../有声相册/img/高中2.jpg" alt=""></a>
            <a href="../有声相册/img/高中3.jpg"><img src="../有声相册/img/高中7.jpg" alt=""></a>
        </div>
    
</body>
</html>